<template>
    <div>
        <el-header>用户管理</el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="">全部</el-menu-item>
            <el-menu-item index="wechat">微信公众号</el-menu-item>
            <el-menu-item index="routine">微信小程序</el-menu-item>
            <el-menu-item index="h5">H5</el-menu-item>
        </el-menu>
        <el-collapse accordion>
            <el-collapse-item>
                <template slot="title">
                    <div class="sou">
                        <el-row :gutter="10">
                            <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="21">
                                <div class="grid-content bg-purple">
                                    <span>用户搜索:</span>
                                    <el-input style="width:200px" type="text" v-model="user1.nickname" placeholder="请输入内容"></el-input>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </template>
                <!-- 会员等级 -->
                <div>
                    <el-row :gutter="10">
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple">
                                <span>会员等级:</span>
                                <el-select v-model="user1.level" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple-light">
                                <span>用户分组:</span>
                                <el-select v-model="user1.group_id" placeholder="请选择">
                                        <el-option
                                        v-for="item in options1"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple">
                                <span>用户标签:</span>
                                <el-select v-model="user1.label_id" placeholder="请选择">
                                        <el-option
                                        v-for="item in options2"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                </el-select>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 国家 -->
                <div>
                    <el-row :gutter="10">
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple">
                                <span>国家:</span>
                                <el-select v-model="user1.country" placeholder="请选择">
                                    <el-option
                                    v-for="item in options3"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple">
                                <span>省份:</span>
                                <el-cascader
                                    v-model="value"
                                    :options="shengArr"
                                    @change="handleChange">
                                </el-cascader>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 性别 -->
                <div>
                    <el-row :gutter="10">
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple">
                                <span>性别:</span>
                                 <el-radio-group @change='radioFun' v-model="user1.sex" size="medium">
                                    <el-radio-button label='' >全部</el-radio-button>
                                    <el-radio-button label='1'>男</el-radio-button>
                                    <el-radio-button label='2'>女</el-radio-button>
                                    <el-radio-button label='0'>保密</el-radio-button>
                                </el-radio-group>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple-light">
                                <span>身份:</span>
                                <el-radio-group @change='radioFun1' v-model="user1.is_promoter" size="medium">
                                    <el-radio-button label='' >全部</el-radio-button>
                                    <el-radio-button label='1'>推广员</el-radio-button>
                                    <el-radio-button label='2'>普通用户</el-radio-button>
                                </el-radio-group>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 访问情况 -->
                <div>
                    <el-row :gutter="10">
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple">
                                <span>访问情况:</span>
                                <el-select v-model="user1.user_time_type" @change="fangwenFun" placeholder="请选择">
                                    <el-option
                                    v-for="item in qingArr"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple-light">
                                <span>下单次数:</span>
                                <el-select v-model="user1.pay_count" placeholder="请选择">
                                    <el-option
                                    v-for="item in ciArr"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 时间 -->
                <div>
                    <el-row :gutter="10">
                        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                            <div class="grid-content bg-purple-light">
                                <span>选择时间:</span>
                                <el-date-picker
                                    v-model="userTime"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="timefuns"
                                    :picker-options="pickerOptions">
                                </el-date-picker>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                     <el-row :gutter="10">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <div class="grid-content bg-purple">
                                <el-button type="primary" icon="el-icon-search" @click="souFun">搜索</el-button>
                                <el-button @click="chongFun">重 置</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>
        </el-collapse>
        <div>
            <el-button type="primary" @click="quanFun" >发送优惠券</el-button>
            <el-button @click="fenFun">批量设置分组</el-button>
            <el-button @click="biaoFun">批量设置标签</el-button>
        </div>
        <div class="alacts" v-show="multipleSelection.length<=0?false:true">
            <i class="el-icon-info">已选择{{multipleSelection.length}}</i>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="首次访问:">
                    <span>{{ props.row.add_time |timeFun()}}</span>
                </el-form-item>
                <el-form-item label="近次访问:" >
                    <span>{{ props.row.last_time |timeFun()}}</span>
                </el-form-item>
                <el-form-item label="身份证号:">
                    <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="手机号:">
                    <span>{{ props.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="真实姓名:">
                    <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="标签:">
                    <span>{{ props.row.labels }}</span>
                </el-form-item>
                <el-form-item label="生日:">
                    <span>{{ props.row.desc }}</span>
                </el-form-item>
                <el-form-item label="地址:">
                    <span>{{ props.row.desc }}</span>
                </el-form-item>
                <el-form-item label="备注:">
                    <span>{{ props.row.desc }}</span>
                </el-form-item>
                </el-form>
            </template>
            </el-table-column>
            <el-table-column
            type="selection"
            width="120">
            </el-table-column>
            <el-table-column
            label="ID"
            width="180"
            prop="uid">
            </el-table-column>
            <el-table-column
            label="头像"
            width="180"
            prop="name">
            <template slot-scope="scope">
                <div><img class="img" :src="scope.row.avatar"></div>
            </template>
            </el-table-column>
            <el-table-column
            label="姓名"
            width="180"
            prop="nickname">
            </el-table-column>
            <el-table-column
            label="会员等级"
            width="180"
            prop="level">
            </el-table-column>
            <el-table-column
            label="分组"
            width="180"
            prop="group_id">
            </el-table-column>
            <el-table-column
            label="推荐人"
            width="180"
            prop="group_id">
            </el-table-column>
            <el-table-column
            label="用户类型"
            width="180"
            prop="user_type">
            </el-table-column>
            <el-table-column
            label="余额"
            width="180"
            sortable
            prop="now_money">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="180">
                <template slot-scope="scope">
                    <el-button
                    @click="edlitFun(scope.$index,scope.row)"
                    type="text">
                        编辑
                    </el-button>
                    <el-dropdown  @command="handleCommand">
                        <span class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item  command="9">账单详情</el-dropdown-item>
                            <el-dropdown-item  command="8">积分余额</el-dropdown-item>
                            <el-dropdown-item  command="7">赠送会员</el-dropdown-item>
                            <el-dropdown-item  command="6">设置分组</el-dropdown-item>
                            <el-dropdown-item  command="5">设置标签</el-dropdown-item>
                        </el-dropdown-menu>
                        </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
         <el-pagination
            @current-change="handleCurrentChange"
            :current-page="user1.page"
            :page-size="user1.limit"
            @prev-click="prevclick"
            @next-click='nextclick'
            layout="total, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
        <!-- 发送优惠券 -->
        <el-dialog title="发送优惠券" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="优惠券名称" width="150"></el-table-column>
                <el-table-column property="name" label="优惠券面值" width="200"></el-table-column>
                <el-table-column property="name" label="优惠券最低消费" width="200"></el-table-column>
                <el-table-column property="name" label="优惠券有效期限" width="200"></el-table-column>
                <el-table-column property="name" label="操作" width="200"></el-table-column>
            </el-table>
        </el-dialog>
        <!-- 设置用户分组 -->
        <el-dialog title="设置用户分组" :visible.sync="dialogTableVisible1">
            用户分组  : <el-select v-model="zu" placeholder="请选择">
                            <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                    </el-select>
            <el-button class="btn1" @click="zuFun" type="primary">提交</el-button>
        </el-dialog>
        <!-- 设置用户标签 -->
        <el-dialog title="设置用户标签" :visible.sync="dialogTableVisible2">
            用户标签  ：<el-select
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                @change="changeFuns"
                placeholder="请选择设置标签">
                <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button class="btn1" @click="biaobtnFun" type="primary">提交</el-button>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="dialogTableVisible3">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="用户编码">
                    <el-input v-model="form.uid" disabled></el-input>
                </el-form-item>
                <el-form-item label="真实姓名">
                    <el-input v-model="form.real_name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.card_id"></el-input>
                </el-form-item>
                <el-form-item label="用户地址">
                    <el-input v-model="form.addres"></el-input>
                </el-form-item>
                <el-form-item label="用户备注">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form.mark">
                    </el-input>
                </el-form-item>
                <el-form-item label="会员等级">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户分组">
                    <el-select v-model="form.group_id" placeholder="请选择">
                        <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户标签">
                    <el-select v-model="val1" :multiple="true" placeholder="请选择">
                        <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="推广员">
                     <el-radio-group v-model="vals">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">锁定</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提 交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {list,user_label,user,vip_list,you,zu,biao,edlitF,submitElit} from '../../api/userapi'
import moment from 'moment'

export default {
    components:{
    },
    data() {
        return {
            value:'',
            value2:'',
            input:'',
            zu:'',
            user1:{
                label_id:'',
                user_type:'',
                status:'',
                sex:'',
                is_promoter:'',
                country:'',
                pay_count:"",
                user_time_type:'',
                user_time:'',
                nickname:'',
                province:'',
                city:'',
                page:1,
                limit:15,
                level:'',
                group_id:''
            },
            userTime:'',
            page:1,
            limit:'',
            is_show:1,
            title:'',
            activeIndex: '',
            tableData:[],
            count:0,
            options:[{
                value:'',
                label:"全部"
            }],
            options1:[{
                value:'',
                label:"全部"
            }],
            options2:[{
                value:'',
                label:"全部"
            }],
            options3:[{
                    value:'',
                    label:"全部"
                },
                {
                    value:'domestic',
                    label:"中国"
                },
                {
                    value:'abroad',
                    label:"外国"
                }
            ],
            radio2:'',
            radio3:'',
            shengArr:[{
                value: '天津',
                label: '天津',
                children: [{
                    value: '和平区',
                    label: '和平区',
                },{
                    value: '河西区',
                    label: '河西区',
                },{
                    value: '滨海新区',
                    label: '滨海新区',
                },{
                    value: '北辰区',
                    label: '北辰区',
                },{
                    value: '武清区',
                    label: '武清区',
                }],
            }],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            qingArr:[
                {
                    value:'',
                    label:'全部'
                },
                {
                    value:'visitno',
                    label:'时间段未访问'
                },
                {
                    value:'visit',
                    label:'时间段访问过'
                },{
                    value:'add_time',
                    label:'首次访问'
                }
            ],
            ciArr:[
                {
                    value:'',
                    label:'全部'
                }, {
                    value:'-1',
                    label:'0次'
                }, {
                    value:'0',
                    label:'1次以上'
                }, {
                    value:'1',
                    label:'2次以上'
                }, {
                    value:'2',
                    label:'3次以上'
                }, {
                    value:'3',
                    label:'4次以上'
                }, {
                    value:'4',
                    label:'5次以上'
                }
            ],
            multipleSelection:[],
            dialogTableVisible:false,
            dialogTableVisible1:false,
            dialogTableVisible2:false,
            dialogTableVisible3:false,
            uid:[],
            uids:[],
            label_isd:[],
            form:{},
            val1:[],
            radio:"",
            vals:''
        }
    },
    filters: {
        timeFun(val){
            let num=(val*1)*1000
            return  moment(num).format('yyyy-MM-DD  hh:mm:ss')
        }
    },
    methods: {
        // 点击提交
        onSubmit(){
            console.log(this.form);
            // submitElit().then((res)=>{
            //     console.log(res.data);
            // })
        },
        // 重置
        chongFun(){
            console.log(111);
            this.user1.label_id=''
            this.user1.user_type='',
            this.user1.status='',
            this.user1.sex='',
            this.user1.is_promoter='',
            this.user1.country='',
            this.user1.pay_count="",
            this.user1.user_time_type='',
            this.user1.user_time='',
            this.user1.nickname='',
            this.user1.province='',
            this.user1.city='',
            this.user1.page=1,
            this.user1.limit=15,
            this.user1.level='',
            this.user1.group_id=''
            this.userTime=''
            this.userFun()
        },
        // 编辑
        edlitFun(index,row){
            console.log(row);
            let zhuang=row.status==='禁止'?0:1
            let zhuang1=row.is_promoter===1?1:0
            this.form=row
            // this.val1=row.labels.split(',')
            this.radio=zhuang
            this.vals=zhuang1
            this.dialogTableVisible3=true
            edlitF().then((res)=>{
                console.log(res.data.data.rules);
                if(res.data.status==200){
                    // this.val1=res.data.data
                }
            })
        },
        // 搜索
        souFun(){
            this.userFun()
        },
        //访问情况
        fangwenFun(val){
            this.user1.user_time_type=val
        },
        // 时间选择
        timefuns(val){
            this.user1.user_time=moment(val[0]).format('YYYY/MM/DD')+'-'+moment(val[1]).format('YYYY/MM/DD')
        },
        // 返回评价图片
        imgArr1Fun(val){
            this.zhe.isShow=val.isShow
            this.formList.avatar=val.imgArr[0]
        },
        //表格多选
         handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 用户分组提交
        zuFun(){
            let arr=this.uid.join(',')
            console.log();
            zu({group_id:this.zu,uids:arr}).then(res=>{
                console.log(res.data);
                if(res.data.status==200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success',
                        duration:1000,
                    });
                    this.userFun()
                this.dialogTableVisible1=false
                }else{
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration:1000,
                    });
                this.dialogTableVisible1=false
                }
            })
        },
        // 用户标签多选
        changeFuns(val){
            this.label_isd=val
        },
        // 用户标签提交
        biaobtnFun(){
            console.log(2222);
            let arr=this.uids.join(',')
            biao({label_id:this.label_isd,uids:arr}).then(res=>{
                console.log(res.data);
                if(res.data.status==200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success',
                        duration:1000,
                    });
                    this.userFun()
                this.dialogTableVisible2=false

                }else{
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration:1000,
                    });
                this.dialogTableVisible2=false

                }
            })
                

        },
        // 发送优惠券
        quanFun(){
            if(this.multipleSelection.length<=0){
                this.$message({
                    message: '请选择要发送优惠券的用户',
                    type: 'warning',
                    duration:1000,
                });
            }else{
                this.dialogTableVisible=true
            }
        },
        // 批量设置分组
        fenFun(){
            if(this.multipleSelection.length<=0){
                this.$message({
                    message: '请选择要批量设置分组的用户',
                    type: 'warning',
                    duration:1000,
                });
            }else{
                this.dialogTableVisible1=true
                if(this.multipleSelection.length<=1){
                    this.zu=this.multipleSelection.group_id
                    this.uid.push(this.multipleSelection[0].uid)
                }else{
                    this.zu=''
                    this.multipleSelection.forEach((v,i)=>{
                        this.uid.push(v.uid)
                    })
                }
            }
        },
        // 批量设置标签
        biaoFun(){
            if(this.multipleSelection.length<=0){
                this.$message({
                    message: '请选择要批量设置标签的用户',
                    type: 'warning',
                    duration:1000,
                });
            }else{
                this.dialogTableVisible2=true
                if(this.multipleSelection.length<=1){
                    this.zu=this.multipleSelection.group_id
                    this.uids.push(this.multipleSelection[0].uid)
                }else{
                    this.zu=''
                    this.multipleSelection.forEach((v,i)=>{
                        this.uids.push(v.uid)
                    })
                }
            }
        },

        // 性别
        radioFun(val){
            console.log(val);
        },
        // 身份
        radioFun(val){
            console.log(val);
        },
        // 省份
        handleChange(value) {
            this.user1.province=value[0]
            this.user1.city=value[1]
        },
        // 更多下拉选中
        handleCommand(command) {
            this.$message('click on item ' + command);
        },
        // 点击全部、微信公众号等
        handleSelect(key, keyPath) {
            this.user1.user_type=key
            this.userFun()
        },
        // 获取数据
        userFun(){
            user({...this.user1}).then((res)=>{
                if(res.data.status==200){
                    this.tableData=res.data.data.list
                    this.count=res.data.data.count
                }
            })
        },
        // 用户分组
        listFun(){
            list({page:this.page,limit:this.limit}).then((res)=>{
                if(res.data.status==200){
                    res.data.data.list.forEach(i => {
                        this.options1.push({
                            value:i.id,
                            label:i.group_name
                        })
                    });
                }
            })
        },
        // 用户等级
        vip_listFun(){
            vip_list({page:this.page,limit:this.limit,title:this.title,is_show:this.is_show}).then((res)=>{
                if(res.data.status==200){
                    res.data.data.list.forEach(i => {
                        this.options.push({
                            value:i.id,
                            label:i.name
                        })
                    });
                }
            })
        },
        //用户标签
        user_labelFun(){
            user_label({page:this.page,limit:this.limit}).then((res)=>{
                console.log(res.data.data.list);
                 if(res.data.status==200){
                    res.data.data.list.forEach(i => {
                        this.options2.push({
                            value:i.id,
                            label:i.label_name
                        })
                    });
                }
            })
        },
        // 上一页
        prevclick(val){
            this.user1.page=val
            this.userFun()
        },
        // 下一页
        nextclick(val){
            this.user1.page=val
            this.userFun()
        },
        // 改变页数
        handleCurrentChange(val) {
            this.user1.page=val
            this.userFun()
        },
        // 发送优惠券
        youFun(){
            you().then((res)=>{
                if(res.data.status==200){
                    console.log(res.data.data);
                }
            })
        }
    },
    created(){
        this.userFun()
        this.listFun()
        this.vip_listFun()
        this.user_labelFun()
        this.youFun()
    }
}
</script>
<style lang="scss" scoped>
.alacts{
    width: 100%;
    height: 30px;
    border: 1px solid skyblue;
    display: flex;
    align-items: center;
}
.sou{
    width: 100%;
    .div1{
        display: flex;
        width: 800px;
        flex-wrap: wrap;
        span{
            display: inline-block;
            width: 150px;
            text-align: center;
        }
    }
}
.btn1{
    width: 100%;
    
}

.el-header{
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
}
.demo-table-expand {
    font-size: 0;
    flex-wrap: wrap;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .el-form-item{
    width: 300px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .img{
      width: 50px;
      height: 50px;
      display: block;
  }
 div{
    margin-bottom: 2px;
 }
</style>